<!-- 组件html内容 -->
<template>
  <!-- 一定要有一个根标签div class属性值是组件名称 -->
  <div class="Main">
    <!-- 左侧菜单容器 -->
    <div class="main_left">
      <el-menu :router="true" default-active="2" :collapse="isCollapse" class="el-menu-vertical-demo" @open="handleOpen"
        @close="handleClose" background-color="#282D8F" text-color="#fff" active-text-color="black">

        <el-menu-item index="1">
          <img style="width: 40px;" :src="logoFile" />
          <span slot="title" class="sysTitle">智慧政务系统</span>
        </el-menu-item>

        <el-submenu index="2">
          <!-- 一级菜单栏 -->
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>系统管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item-group>
            <el-menu-item index="/userindex"><i class="el-icon-s-custom"></i>用户管理</el-menu-item>
            <el-menu-item index="/file"><i class="el-icon-receiving"></i>文件管理</el-menu-item>
            <el-menu-item index="/log"><i class="el-icon-files"></i>日志管理</el-menu-item>
          </el-menu-item-group>

        </el-submenu>

      </el-menu>
    </div>
    <div class="main_right">
      <!-- 导航栏容器 -->
      <div class="main_right_top">
        <div class="main_right_top_menubtn">
          <el-button @click="isCollapse==false?isCollapse=true:isCollapse=false" icon="el-icon-s-fold" title="点击折叠/展开菜单"
            circle></el-button>
        </div>
        <div class="main_right_top_actors">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <el-dropdown>
            <span class="el-dropdown-link">
              蔡徐坤<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="main_right_context">
        <!-- 组件盒子 -->
        <div class="main_right_context_router">
          <!-- main组件的子路由会在此处跳转 -->
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 组件js部分 -->
<script>
  export default {
    name: 'Main', //组件的名称-要和文件名相同（驼峰规则命名）
    data() {
      return {
        // 菜单折叠和展开状态 false展开 true折叠
        isCollapse: false,
        logoFile: require("@/assets/logo.png")
      }
    },
    methods: {

    },
    watch: {

    }
  }
</script>

<!-- 3.组件的css样式部分 scoped：当前声明的样式只提供给当前组件使用 -->
<style scoped>
  /*如果以后你发现修改了样式还是没有加上一个 /deep/ */

  .el-menu {
        border-right: solid 0px #e6e6e6 !important;
    }

  .el-menu-item.is-active {
    color: #409EFF;
    background-color: #FFF !important;
  }

  .Main {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: #E9EDF2;
  }

  .main_left {
    width: auto;
    background-color: #282D8F;
  }

  .main_right {
    flex-grow: 1;
  }

  .main_right_top {
    height: 80px;
    width: 100%;
    float: left;
    background-color: #FFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main_right_top_menubtn {
    width: 50px;
    height: 50px;
  }

  .main_right_top_actors {
    width: 150px;
    height: 70px;
    display: flex;
    align-items: center;
  }

  .main_right_context {
    width: 100%;
    height: calc(100% - 80px);
    float: left;
    padding: 10px;
    box-sizing: border-box;

  }

  .main_right_context_router {
    background-color: #FFF;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
  }

  .sysTitle{
    font-size: 20px;
    font-weight: bold;
  }
</style>
